import Link from "next/link";
import Image from "next/image";
import Tag from "@/components/Common/Tag";
import tagColor from "@/constant/tagColor";

type PictureCardProps = {
  imageUrl: string;
  title: string;
  text: string;
  linkUrl: string;
  tags: string[];
  clicks?: number;
  date: string;
};
const PictureCard = ({
  imageUrl,
  title,
  text,
  tags,
  linkUrl,
  clicks,
  date,
}: PictureCardProps) => {
  return (
    <div className="group mb-4 relative rounded-3xl bg-slate-50 p-6 dark:bg-slate-800/80 dark:highlight-white/5 hover:bg-slate-100 dark:hover:bg-slate-700/50">
      <div className="relative rounded-md transform overflow-hidden shadow-[0_2px_8px_rgba(15,23,42,0.08)] bg-slate-200 dark:bg-slate-700">
        <Image
          src={imageUrl}
          alt={""}
          width={700}
          height={400}
          className="aspect-video object-cover group-hover:scale-105 transition-transform duration-200 ease-out"
        />
      </div>
      <div className="flex flex-col mt-4 space-y-3 leading-2">
        <h2 className="text-slate-900 dark:text-white font-semibold group-hover:text-sky-500 dark:group-hover:text-sky-400">
          <Link href={linkUrl}>
            <span className="absolute inset-0 rounded-3xl text-[15px]"></span>
            {title}
          </Link>
        </h2>
        <p className="w-full flex-none text-[0.8125rem] text-slate-500 dark:text-slate-400">
          {text}
        </p>
        <div className="flex justify-between align-middle">
          <div className="space-x-2">
            {tags.map((tagName: string) => (
              <Tag
                tagName={tagName}
                key={tagName}
                className={`px-2 py-2 font-semibold text-xs/[6px] text-white shadow-sm ${tagColor[tagName]}`}
              />
            ))}
          </div>
          <div>{date}</div>
        </div>
      </div>
    </div>
  );
};
export default PictureCard;
